<template>
    <!-- **
            1.定义过滤器：实现从后往前每三个数字有一个 , 结构中配合管道符 ‘|’ 使用，如：12457 | num ==> 12,457（vue2官网-起步-过滤器）。当想用计算属性，但是又不是很合适的时候，考虑用这个。
        ** -->
    <div>
        <div class="top">
            <ul>
                <li>
                    <div class="total">
                        <span>总销售额：</span>
                        <p>{{ topObj.toalsellmoney | num }} 元</p>
                    </div>
                    <span class="day">今日销售额：{{ topObj.todaysellmoney | num }} 元</span>
                </li>
                <li style="background-color: #1e78bf;">
                    <div class="total">
                        <span>总访问量：</span>
                        <p>{{ topObj.toalaccess | num }} 个</p>
                    </div>
                    <span class="day">今日访问量：{{ topObj.todayaccess | num }} 个</span>
                </li>
                <li style="background-color: #BA55D3;">
                    <div class="total">
                        <span>总收藏量：</span>
                        <p>{{ topObj.toalcllect | num }} 个</p>
                    </div>
                    <span class="day">今日收藏量：{{ topObj.todaycllect | num }} 个</span>
                </li>
                <li style="background-color: #4ab1f1">
                    <div class="total">
                        <span>总支付量：</span>
                        <p>{{ topObj.toalpay | num }} 个</p>
                    </div>
                    <span class="day">今日支付量：{{ topObj.todaypay | num }} 元</span>
                </li>
            </ul>
        </div>
        <div class="midlle">
            <div class="mid-lt mid-com">
                <span>月销售额</span>
                <div id="mthsell" style="width: 753px; height: 308px;">图形区域</div>
            </div>
            <div class="mid-rt mid-com">
                <span>产品销售比例</span>
                <div id="prosell" style="width: 448px; height: 308px;">图形区域</div>
            </div>
        </div>
        <div class="foot">
            <ul>
                <li class="out-li">
                    <span class="out-span">今日订单</span>
                    <ul>
                        <li>
                            <span>今日订单数</span>
                            <p>{{ footObj.todayorder }}</p>
                        </li>
                        <li>
                            <span>汇总确认订单</span>
                            <p>{{ footObj.toalsureorder }}</p>
                        </li>
                        <li>
                            <span>累计金额</span>
                            <p>{{ footObj.toalmoney }}</p>
                        </li>
                    </ul>
                </li>
                <li class="out-li">
                    <span class="out-span">本月订单</span>
                    <ul>
                        <li>
                            <span>本月订单数</span>
                            <p>{{ footObj.monthorder }}</p>
                        </li>
                        <li>
                            <span>汇总确认订单</span>
                            <p>{{ footObj.monthtoalorder }}</p>
                        </li>
                        <li>
                            <span>累计金额</span>
                            <p>{{ footObj.monthtoalmoney }}</p>
                        </li>
                    </ul>
                </li>
                <li class="out-li">
                    <span class="out-span">快捷入口</span>
                    <ul>
                        <li class="kjrk active">
                            <span>产品管理</span>
                        </li>
                        <li class="kjrk">
                            <span>消息管理</span>
                        </li>
                        <li class="kjrk">
                            <span>内容管理</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import {
    getHomeTopNumb,
    getHomefootNumb,
    getHomemidle
} from "@/api/request/home/index";
export default {
    name: 'home-page',
    data() {
        return {
            topObj: {}, // 顶部数据数额总对象
            footObj: {}, // 顶部数据数额总对象
        }
    },
    created() {
        this.getTopNumb()
        this.getFootNumb()
    },
    mounted() {
        this.getMidleData()
    },
    methods: {
        async getTopNumb() {
            const res = await getHomeTopNumb('/hometop')
            if (res.code != 200) {
                this.$message.error('获取数据失败！');
            }
            this.topObj = res.datas
        },
        async getFootNumb() {
            const res = await getHomefootNumb('/homefoot')
            if (res.code != 200) {
                return this.$message.error('获取数据失败！');
            }
            this.footObj = res.datas
        },
        async getMidleData() {
            const res = await getHomemidle('/homemidel')
            console.log('res', res);
            if (res.code != 200) {
                return this.$message.error('获取数据失败！')
            }
            let mothEchartData = []

            let mothObj = res.datas.moth[0]
            for (let key in mothObj) {           // 把拿到的数据，放的 mothEchartData 中
                mothEchartData.push(mothObj[key])
                this.monthSellEchart(mothEchartData)  // 创建柱型、折线型图表并动态传值
            }
            this.productSellEchart(res.datas.prot)  // 创建饼图图表并动态传值

        },
        // 学习常用配置
        // monthSellEchart() {
        //     let myChart = echarts.init(document.getElementById('mthsell'));
        //     myChart.setOption({
        //         // title: {
        //         //     text: 'ECharts 入门示例'
        //         // },
        //         tooltip: {  // 鼠标旁边-提示框配置
        //             // formatter: '{a}-{b}-{c}'
        //         },
        //         xAxis: { // x 轴数据
        //             data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        //             axisLine: {     // x 轴线
        //                 lineStyle: {
        //                     color: '#1ff',
        //                     width: 1,
        //                     type: 'dashed'
        //                 }
        //             },
        //             axisLabel:{    // 轴线下的文字
        //                 color:'#000'
        //             },
        //             axisTick:{   // 刻度
        //                 lineStyle:{
        //                     color:'red',
        //                 }
        //             }
        //         },
        //         yAxis: {  // y轴数据自动创建

        //         },
        //         series: [  // 图标内容，与 x 轴内容一一对应
        //             {
        //                 name: '销量',
        //                 type: 'bar',   // bar 柱状图 ， line 折线图 ， pie 饼图 ， map 地图
        //                 data: [5, 20, 36, 10, 10, 20]
        //             }
        //         ]
        //     });
        // },
        // 项目中使用的
        monthSellEchart(valdata) {
            let myChart = echarts.init(document.getElementById('mthsell'));
            myChart.setOption({
                // title: {
                //     text: 'ECharts 入门示例'
                // },
                tooltip: {},
                legend: {
                    data: ['销售量', '销售额']
                },
                xAxis: { // x 轴数据
                    data: ['肉类', '水产', '蔬菜', '冷饮食品', '水果'],
                },
                yAxis: {  // y轴数据自动创建

                },
                series: [  // 图表内容，与 x 轴内容一一对应
                    {
                        name: '销售量',
                        type: 'bar',   // bar 柱状图 ， line 折线图 ， pie 饼图 ， map 地图
                        data: valdata
                    },
                    {
                        name: '销售额',
                        type: 'line',   // bar 柱状图 ， line 折线图 ， pie 饼图 ， map 地图
                        data: valdata,
                        smooth: true,
                        lineStyle: {
                            color: '#00BFFF'
                        },
                        itemStyle: {
                            color: '#00BFFF'
                        }
                    }
                ]
            });
        },
        productSellEchart(valArr) {
            let myChart2 = echarts.init(document.getElementById('prosell'));
            myChart2.setOption({
                tooltip: {
                    formatter: '{a}<br/>{b}：{d}%'    // 换行 要用 <br/>
                },
                legend: {
                    data: ['肉类', '水产', '蔬菜', '冷饮食品', '水果'],
                    orient: 'vertical',
                    left: 'left'
                },
                series: [  // 图表内容，与 x 轴内容一一对应
                    {
                        name: '销量比列',
                        type: 'pie',
                        radius: '50%',
                        data: valArr,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        }
    },
    filters: {   // 过滤器
        num(val) {
            if (!val) return
            return val.toLocaleString()  // js 自带方法，一步到位
        }
    }
}
</script>
<style scoped lang="less">
.top {
    ul {
        width: 100%;
        display: flex;
        margin-bottom: 20px;

        li {
            width: 25%;
            height: 127px;
            border-radius: 5px;
            background-color: #CD853F;
            color: #fff;
            margin-right: 2%;

            .total {
                height: 68px;
                padding: 5px 10px;
                border-bottom: 1px solid #fff;

                p {
                    margin: 15px 0 0 80px;
                    font-size: 20px;
                    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                }
            }

            .day {
                padding: 15px;
            }
        }
    }
}

.midlle {
    width: 100%;
    display: flex;
    margin-bottom: 20px;

    span {
        margin-bottom: 8px;
    }

    .mid-lt {
        width: 60%;
        margin-right: 2%;
    }

    .mid-rt {
        flex: 1;
    }

    .mid-com {
        height: 350px;
        border-radius: 5px;
        padding: 5px 10px;
        background-color: #fff;
    }
}

.foot {
    ul {
        width: 100%;
        display: flex;

        .out-li {
            width: 29%;
            height: 127px;
            border-radius: 5px;
            color: #000;
            margin-right: 5%;
            background-color: #fff;
            box-shadow: 0 0 10px #999;

            &:last-child {
                margin-right: 0;
            }

            .out-span {
                font-weight: 500;
                padding: 10px 15px;
            }

            ul {
                width: 100%;
                padding: 10px 15px;
                box-sizing: border-box;
                border-top: 1px solid #eea;

                li {
                    width: 34%;
                    font-size: 12px;
                    text-align: center;
                    padding: 5px 0;
                    border-right: 1px solid #eee;

                    &:last-child {
                        border: 0;
                    }

                    span {
                        margin-bottom: 10px;
                    }
                }

                .kjrk {
                    width: 30%;
                    margin-right: 4%;
                    height: 33.8px;
                    line-height: 33.8px;
                    cursor: pointer;
                    border-radius: 5px;
                    border: 1px solid #bbb !important;

                    &:last-child {
                        margin-right: 0;
                    }
                }

                .active {
                    background-color: #4169E1;
                    color: #fff;
                }
            }
        }
    }
}
</style>